<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单得三维地图</title>
    <link rel="stylesheet" href="css/common.css">
    <!--引入cesium基础lib-->
    <link rel="stylesheet" href="../lib/Cesium/Widgets/widgets.css">
    <script>
        window.CESIUM_BASE_URL = "http://mars3d.cn/lib/Cesium/" //非必须，如jsp、asp.net等非html框架报错时建议取消注释
    </script>
    <script src="../lib/Cesium/Cesium.js"></script>
    <script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
    <!--引入mars3d库lib-->
    <link rel="stylesheet" href="../lib//mars3d/mars3d.css">
    <script src="../lib//mars3d//mars3d.js"></script>
    <!--引入mars3d库插件lib（按需引入）-->
    <script src="../lib/mars3d//plugins/space/mars3d-space.js"></script>
    <!-- jQuery在线引用地址(全) -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .cesium-viewer-toolbar {
            display: flex;
            flex-direction: column;
        }

        .mars3d-compass {
            bottom: 247px !important;
            right: 0px !important;
            left: unset !important;
        }

        .mars3d-clockAnimate {
            color: #fff;
            top: 0;
        }

        #txt-clockAnimate-speed {
            border: 2px solid #fff;
        }

        .mars3d-overviewMap {
            left: 0;
            top: 105px !important;
        }

        .rain_container {
            position: absolute;
            top: 50%;
            left: 0;
            color: #fff;
        }
        .sonw_container {
            position: absolute;
            top: 55%;
            left: 0;
            color: #fff;
        }
        .fog_container {
            position: absolute;
            top: 60%;
            left: 0;
            color: #fff;
        }
        .snow_cover_container {
            position: absolute;
            top: 65%;
            left: 0;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
    <div id="mars3dContainer" class="mars3d-container"></div>
    <div class="rain_container">
        <label for="rain" id="rain">
            <input type="checkbox" name="rain" id="rainIpt">雨
        </label>
    </div>
    <div class="sonw_container">
        <label for="rain" id="snow">
            <input type="checkbox" name="rain" id="snowIpt">雪
        </label>
    </div>
    <div class="fog_container">
        <label for="rain" id="fog">
            <input type="checkbox" name="rain" id="fogIpt">雾
        </label>
    </div>
    <div class="snow_cover_container">
        <label for="rain" id="snow_cover">
            <input type="checkbox" name="rain" id="snow_coverIpt">地面积雪
        </label>
    </div>
    <script type="text/javascript">
        // 创建三维地球场景
        var map = new mars3d.Map('mars3dContainer', {
            layers: [
                {
                    "id": 1,
                    "type": "geojson",
                    "name": "示例数据",
                    "url": "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
                    "popup": "{name}",
                    "show": true
                },
                {
                    "id": 2,
                    "type": "geojson",
                    "name": "示例数据",
                    "url": "https://geo.datav.aliyun.com/areas_v3/bound/140000_full.json",
                    "popup": "{name}",
                    "show": true
                },
            ],
            scene: {
                //默认视角参数
                center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
                shadows: true, //是否启用日照阴影
                removeDblClick: true, //是否移除Cesium默认的双击事件

                //以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
                sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D,

                //以下是Cesium.Scene对象相关参数
                showSun: true, //是否显示太阳
                showMoon: true, //是否显示月亮
                showSkyBox: true, //是否显示天空盒
                showSkyAtmosphere: true, //是否显示地球大气层外光圈
                fog: true, //是否启用雾化效果
                fxaa: true, //是否启用抗锯齿
                highDynamicRange: true,  //是否关闭高动态范围渲染(不关闭时地图会变暗)
                // backgroundColor:"green", // 空间背景色 ，css颜色值(页面一进来还没加载出地图时)
                // sceneMode:Cesium.SceneMode.COLUMBUS_VIEW, // 初始场景模式。可以设置进入场景后初始是2D、2.5D、3D 模式。
                scene3DOnly: true,  // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
                shouldAnimate: true, // 	是否开启时钟动画

                //以下是Cesium.Globe对象相关参数
                globe: {
                    depthTestAgainstTerrain: false, //是否启用深度监测
                    baseColor: '#546a53', //地球默认背景色
                    showGroundAtmosphere: true, //是否在地球上绘制的地面大气
                    enableLighting: false //是否显示昼夜区域
                },
                //以下是Cesium.ScreenSpaceCameraController对象相关参数
                cameraController: {
                    zoomFactor: 3.0, //鼠标滚轮放大的步长参数
                    minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
                    maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
                    enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
                    enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
                    enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
                    enableZoom: true, // 是否允许 用户放大和缩小视图
                    enableCollisionDetection: true //是否允许 地形相机的碰撞检测
                }
            },
            control: {
                //以下是Cesium.Viewer所支持的控件相关的options
                baseLayerPicker: true, //basemaps底图切换按钮，图层选择器，选择要显示的地图服务和地形服务
                homeButton: true, //视角复位按钮
                sceneModePicker: true, //二三维切换按钮， 选择投影模式,有三种：3D,2D,哥伦布视图
                navigationHelpButton: true, //帮助按钮，显示默认的地图控制帮助
                infoBox: true, //信息框
                selectionIndicator: true, //选择框
                vrButton: true, //vr模式按钮
                fullscreenButton: true, //全屏按钮
                animation: false, //动画部件按钮（左下角），控制视图动画的播放速度
                timeline: false, //时间线（下侧）,指示当前时间，并允许用户跳到特定的时间
                geocoder: true, //POI查询按钮
                geocoderConfig: { key: ['ae29a37307840c7ae4a785ac905927e0'] }, //POI查询按钮参数配置

                // 状态栏
                locationBar: {
                    fps: true, //实时显示 FPS 帧率
                    latDecimal: 2, // 保留经纬度小数点尾数
                    // style:{   // 状态栏位置
                    //     top,
                    //     bottom,
                    //     left,
                    //     right
                    // }
                },
                /**
                 * 时钟控件
                 * object
                 * id：对象的 id 标识
                 * format：时间格式化字符串
                 * enabled：启用状态
                 * parentContainer：控件加入的父容器
                 * insertIndex：可以自定义插入到父容器中的index顺序，默认是插入到最后面
                 * insertBefore：可以自定义插入到指定兄弟容器的前面，与insertIndex二选一
                 * 
                */
                clockAnimate: {
                    enabled: true,
                    format: 'yyyy-MM-dd HH:mm:ss'
                },
                animation: true, //时钟仪表控制(Cesium原生) 
                timeline: false,  //时间线, 是否创建下侧时间线控件面板
                /**
                 * 鹰眼地图
                 * object
                 * basemap:瓦片底图图层配置
                 * layers:可以叠加显示的图层配置
                 * scene:鹰眼地图场景参数
                 * rectangle：矩形区域样式信息，不配置时不显示矩形
                 * style：
                 * flyToOptions：小地图的定位参数
                 *      scale:缩放比例，可以控制视角比矩形略大一些，这样效果更友好。
                 *      duration:飞行时间（单位：秒）。如果省略，SDK内部会根据飞行距离计算出理想的飞行时间。
                 *      complete:飞行完成后要执行的函数。
                 *      cancel:飞行取消时要执行的函数
                 * id；对象的标识
                 * enabled：启用状态
                 * parentContainer：控件加入的父容器
                 * insertIndex：可以自定义插入到父容器中的index顺序，默认是插入到最后面
                 * insertBefore	：可以自定义插入到指定兄弟容器的前面，与insertIndex二选一。
                */
                overviewMap: {
                    enabled: true,
                    basemaps: [
                        {
                            name: "tms_world",
                            type: "wmts",
                            show: true,
                            url: 'http://192.168.1.251:8089/freexserver/htc/service/wmts',
                            layer: 'tms_world',
                            style: "",
                            format: "image/png",
                            tileMatrixSetID: 'EPSG:4326',
                            tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
                                'EPSG:4326:4',
                                'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9',
                                'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13',
                                'EPSG:4326:14',
                                'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18',
                                'EPSG:4326:19',
                                'EPSG:4326:20', 'EPSG:4326:21'
                            ],
                            maximumLevel: 21,
                            tilingScheme: new Cesium.GeographicTilingScheme(),
                        },
                    ],
                    // style:{
                    //     left:"2%"
                    // }
                },

                //以下是mars3d.control定义的控件
                contextmenu: { hasDefault: true },
                mouseDownView: true,
                zoom: { insertIndex: 1 },
                // 导航球（指南针）
                compass: { bottom: "toolbar", left: "5px" },
                // 比例尺控件
                /**
                 * distanceLegend
                 * object
                 * 位置：top，bottom,left,right
                 * id：对象的标识
                 * enabled:对象的启用状态
                 * parentContainer:控件加入的父容器
                 * insetIndex:可以自定义插入到父容器中的 index 顺序
                 * insetBefore:可以自定义插入到指定兄弟容器的前面
                */
                distanceLegend: { left: "100px", bottom: "2px" },
            },
            basemaps: [
                {
                    name: "tms_world",
                    type: "wmts",
                    show: true,
                    url: 'http://192.168.1.251:8089/freexserver/htc/service/wmts',
                    layer: 'tms_world',
                    style: "",
                    format: "image/png",
                    tileMatrixSetID: 'EPSG:4326',
                    tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
                        'EPSG:4326:4',
                        'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9',
                        'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13',
                        'EPSG:4326:14',
                        'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18',
                        'EPSG:4326:19',
                        'EPSG:4326:20', 'EPSG:4326:21'
                    ],
                    maximumLevel: 21,
                    tilingScheme: new Cesium.GeographicTilingScheme(),
                },
            ],
        })
        // 鼠标单击图层后显示 Popup 弹窗
        let geoJsonLayer // 矢量图层对象,用于layer绑定展示
        // 1.在map地图上绑定Popup单击弹窗
        bindMapDemo()
        function bindMapDemo() {
            // removeDemoLayer()

            // 关闭弹窗
            map.closePopup()

            // 传入坐标和内容，可以直接任意弹出
            const position = [116.328539, 30.978731, 1521]
            map.openPopup(position, "我是地图上直接弹出的")
        }

        /**
        * 泛光效果, 使明亮的区域更亮，黑暗的区域更暗。
        * object
        * enabled:启用状态
        * contrast：对比度,取值范围[-255.0,255.0
        * brightness：亮度, 将输入纹理的RGB值转换为色相、饱和度和亮度(HSB)，然后将该值添加到亮度中
        * delta：增量权值
        * sigma：滤波权值，delta和sigma用于计算高斯滤波器的权值。方程是 exp((-0.5 * delta * delta) / (sigma * sigma))
        * stepSize：步长,是下一个texel的距离
        */
        // let bloom = new mars3d.effect.BloomEffect({
        //     enabled: true
        // })
        // map.addEffect(bloom)
        /**
         * 亮度效果
         * object
         * enabled:对象的启用状态
         * brightness:亮度值
        */
        // let brught = new mars3d.effect.BrightnessEffect({
        //     enabled: true,
        //     brightness: 2
        // })
        // map.addEffect(brught)
        /**
         * 雨天气
         * object
         * enabled:对象启用状态
         * size：粒子大小
         * speed：速度
         * direction：方向
         * */
        let rain = new mars3d.effect.RainEffect({
            enabled: false
        })
        map.addEffect(rain)
        /**
         * 雪天气
         * object
         * enabled：对象启用状态
         * speed：速度
        */
       let snow = new mars3d.effect.SnowEffect({
            enabled:false,
            speed:10
       })
       map.addEffect(snow)
       /**
        * 雾天气
        * object
        * enabled:对象开启状态
        * fogByDistance:  new Cesium.Cartesian4(10, 0.0, 1000, 0.9)  雾强度
        *    fogByDistance_near: Number    最近距离，可以与fogByDistance二选一
        *    fogByDistance_nearValue:number 最近强度，可以与fogByDistance二选一
        *    fogByDistance_far Number 最远距离，可以与fogByDistance二选一
        *    fogByDistance_farValue:Number 最远强度，可以与fogByDistance二选一
        * color : 雾颜色
        * maxHeight : Number  最大高度，限定超出该高度不显示雾场景效果
        * 
       */
      let fog = new mars3d.effect.FogEffect({
        enabled:false,
        // color: new Cesium.Color("#fff")
        fogByDistance:new Cesium.Cartesian4(10, 0.0, 1000, 0.7)
      })
      map.addEffect(fog)
      /**
       * 地面积雪
       * object
       * enabled:对象启用状态
       * alpha:覆盖强度 0 - 1
       * maxHeight: 最大高度，限定超出该高度不显示积雪效果
      */
     let snowCover = new mars3d.effect.SnowCoverEffect({
        enabled:false,
        alpha:1,
        maxHeight:1000000000
     })
     map.addEffect(snowCover)
     /**
      * 景深效果
      * object
      * enabled	:
     */
    </script>

    <script>
        // 控制雨开关
        $("#rainIpt").on('click', function (e) {
            let rain_enable = $(this).prop("checked")
            rain.enabled = rain_enable
        })
        // 控制雪开关
        $("#snowIpt").on('click', function (e) {
            let snow_enable = $(this).prop("checked")
            snow.enabled = snow_enable
        })
        // 控制雪开关
        $("#fogIpt").on('click', function (e) {
            let fog_enable = $(this).prop("checked")
            fog.enabled = fog_enable
        })
        // 控制地面积雪
        $("#snow_coverIpt").on("click",function () {
            let snow_conver_enable = $(this).prop("checked")
            snowCover.enabled = snow_conver_enable
        })
    </script>
</body>

</html>